<template>
    <div id="app">
        <h1>{{ title }}</h1>
        <input type="text" v-model="item"/>
        <button @click="add(item)">添加</button>
        <ul>
            <li v-for="(todo,index) in todos" :id="index" :class="{done:todo.done}">
                <label>{{ index + 1 }}.{{ todo.value }}</label>
                <time>{{todo.created | hhmmss}}</time>
            </li>
        </ul>
        <todo :total="todos.length" :done="done"/>
    </div>
</template>

<script type="text/ecmascript-6">
    import Todo from './Todo.vue'
    import moment from 'moment'
    import 'moment/locale/zh-cn'
    import Tabs from "./components/tabs.vue"
    import "./assets/less/site.less"

    moment.locale('zh-ch')

    export default {
        filters: {
            hhmmss: function (val) {
                return moment(val).calendar();
            }
        },
        name: 'app',
        components: {Todo},
        methods: {
            add(x) {
                this.todos.push({value: this.item, done: false, created: new Date().getTime()})
            }
        },
        data() {
            return {
                title: "vue-todos",
                item:'',
                todos: [
                    {value: "阅读一本关于前端开发的书", done: false},
                    {value: "补充范例代码", done: true},
                    {value: "写心得", done: false}
                ]
            }

        },
        /*computed:{
            done:function () {
                var count = 0;
                for(var  i=0;i<this.incidents.length;i++){
                    if(this.incidents[index].done){
                        count++;
                    }
                }
                return count;
            }
        }*/
        /* {
              date(val){
                  return moment(val).calendar();
                 // return new Date(val).getHours()+":"+new Date(val).getMinutes()+":"+new Date(val).getSeconds();
              }
          }*/
    }



    


    export default {
    components: {Tabs}
    }

</style>

